
<template>
  <div class="teach">
    <teachBar></teachBar>
    <div class="content">
      <div class="one">
        <img :src="listDeatil.avatar" />
        <p>{{ listDeatil.introduction }}</p>
      </div>
      <div class="btn">
        <div class="two">
          <button v-show="flag == 2" @click="quxiao">关注</button>
          <button v-show="flag == 0 || flag == 1" @click="quxiao">
            取消关注
          </button>
        </div>
        <div class="three"></div>
      </div>
    </div>
    <div class="detail-c"></div>
    <div class="tab">
      <tabDetail></tabDetail>
    </div>
  </div>
</template>

<script>
import tabDetail from "@/components/teach/tabDetail.vue";
import { getTeacher, getCollect } from "../../utils/api";
import teachBar from "../../components/teach/teachBar.vue";
export default {
  name: "",
  components: { teachBar, tabDetail },
  data() {
    return {
      listDeatil: [],
      flag: 0,
    };
  },
  created() {},
  mounted() {
    this.getTeacherDetail();
    this.quxiao();
  },
  methods: {
    async getTeacherDetail() {
      let res = await getTeacher(this.$route.query.id);
      console.log(res.data.data);
      this.listDeatil = res.data.data.teacher;
      this.flag = res.data.data.flag;
    },
    async quxiao() {
      let res = await getCollect(this.listDeatil.id);
      console.log(res);
      this.flag = res.data.data.flag;
    },
  },
};
</script>
<style scoped lang='scss'>
.teach {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgb(242, 243, 245);
  font-size: 12px;
  .content {
    background-color: #fff;
    width: 712px;
    height: 144px;
    border-radius: 5px;
    position: absolute;
    top: 63px;
    left: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .one {
      display: flex;
      align-items: center;
      color: #777777;
      img {
        width: 71px;
        height: 71px;
        margin: 0 14px;
      }
      p {
        width: 300px;
      }
    }
    .btn {
     .two{
       button {
        width: 90px;
        height: 40px;
        border: none;
        background: #ebeefe;
        color: #eb6100;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
      }

     }
     .three{
      width: 300px;
     }
    }
  }
  .detail-c {
    width: 100%;
    height: 63px;
  }
  .tab {
    margin-top: 20px;
  }
}
</style>
